<template>
    <div class="container">
        <context-holder />
        <a-page-header style="background-color: transparent;" title="关于设备" @back="() => router.back()" />
        <div class="info">
            <img src="@/assets/img/LogoName.png" alt="">
            <p>
                <span>产品型号：</span>
                <span>xxxxxx</span>
            </p>
            <p>
                <span>软件版本：</span>
                <span>{{ deviceInstance?.version }}</span>
            </p>
            <p>
                <span>生产商：</span>
                <span>中普达技术（西安）有限公司</span>
            </p>
            <p>
                <span>联系电话：</span>
                <span>029-85836301</span>
            </p>
        </div>

        <a-list item-layout="horizontal" :data-source="InfoItems" :pagination="false" bordered size="large">
            <template #renderItem="{ item, index }">
                <a-list-item @click="item.clickFn">
                    <div style="display: flex;align-items: center;">
                        <a-avatar :size="60" :src="item.icon" style="margin-right: .2rem;" />
                        <span>{{ item.title }}</span>
                    </div>
                    <div>
                        <span>{{ item.value }}</span>
                        <RightOutlined />
                    </div>
                </a-list-item>
            </template>
        </a-list>

        <a-modal v-model:open="editInfo" centered destroyOnClose @ok="setDeviceInfo" @cancel="getDeviceInfo">
            <a-form layout="vertical">
                <a-form-item v-for="item in InfoItems.filter(item => item.value && item.title !== '序列号')"
                    :label="item.title">
                    <a-input v-model:value="item.value" />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 下载进度弹窗 -->
        <a-modal :maskClosable="false" :closable="false" centered v-model:open="downLoadFlag" :title :footer="null">
            <a-progress :steps="20" :percent="percent" :size="[20, 25]" />
        </a-modal>
        <!-- 暂无下载弹窗 -->
        <a-modal v-model:open="noZip" centered destroyOnClose :closable="false" @ok="() => noZip = false">
            <div style="text-align: center;">暂无新版本</div>
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { RightOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref, h } from 'vue';
import { db } from '@/utils/DexieDB';


import serial from '@/assets/img/serial.png';
import devicename from '@/assets/img/devicename.png';
import sign from '@/assets/img/sign.png';
import support from '@/assets/img/support.png';
import tell from '@/assets/img/tell.png';
import area from '@/assets/img/area.png';
import database from '@/assets/img/database.png';
import version from '@/assets/img/version.png';
import { getVersionApi } from '@/API/API';
import { message, Modal } from 'ant-design-vue';

const [messageApi, contextHolder] = message.useMessage();

const router = useRouter();

const editInfo = ref<boolean>(false);
const deviceInstance = ref<device>();
const title = ref<string>('下载进度');
const downLoadFlag = ref<boolean>(false);
const noZip = ref<boolean>(false);
const percent = ref<number>(0);

const InfoItems = reactive([
    {
        title: '序列号',
        icon: serial,
        value: 'xxxxxx',
    },
    {
        title: '设备名称',
        icon: devicename,
        value: '1.0.0',
        clickFn: () => {
            editInfo.value = true
        }
    },
    {
        title: '设备编号',
        icon: sign,
        value: '029-85836301',
        clickFn: () => {
            editInfo.value = true
        }
    },
    {
        title: '技术支持',
        icon: support,
        value: '中普达技术（西安）有限公司',
        clickFn: () => {
            editInfo.value = true
        }
    },
    {
        title: '联系方式',
        icon: tell,
        value: '029-85836301',
        clickFn: () => {
            editInfo.value = true
        }
    },
    {
        title: '安装位置',
        icon: area,
        value: '029-85836301',
        clickFn: () => {
            editInfo.value = true
        }
    },
    {
        title: '数据库',
        icon: database,
        value: '',
        clickFn: () => {
            router.push('/Database')
        }
    },
    {
        title: '检查新版本',
        icon: version,
        value: '',
        clickFn: () => {
            checkVersion()
        }
    }
])

function checkVersion() {
    // if (isAndroid()) {
    //     window.ClosetAndroid.checkVersion();
    // }
    // b3976a529a3330e8
    // downLoadFlag.value = true
    // window.ClosetAndroid.downloadAndUnzip("http://219.145.17.226:7856/ai_closet/version/1.0.1.zip")

    // http://219.145.17.226:7856/ai_closet/version/1.0.1.zip

    getVersionApi({
        serial: deviceInstance.value!.serial
    }).then(res => {
        if (res.data != null) {
            downLoadFlag.value = true
            window.ClosetAndroid.downloadAndUnzip(res.data.download)
        } else {
            // noZip.value = true
            messageApi.info({
                content: () => '暂无新版本',
                class: 'message-class',
                style: {
                    fontSize: '.5rem',
                    height: '.5rem', // 垂直居中
                },
            });
        }
    })
}

async function setDeviceInfo() {
    InfoItems.forEach(item => {
        if (item.title === '设备名称') {
            deviceInstance.value!.devicename = item.value
        } else if (item.title === '设备编号') {
            deviceInstance.value!.board = item.value
        } else if (item.title === '技术支持') {
            deviceInstance.value!.support = item.value
        } else if (item.title === '联系方式') {
            deviceInstance.value!.supportTell = item.value
        } else if (item.title === '安装位置') {
            deviceInstance.value!.area = item.value
        }
    })
    db.device.update(1, deviceInstance.value!).then(res => {
        editInfo.value = false
    })
}

async function getDeviceInfo() {

    db.device.get(1).then(device => {
        InfoItems.forEach(item => {
            if (item.title === '设备名称') {
                item.value = device?.devicename ?? ''
            } else if (item.title === '设备编号') {
                item.value = device?.board ?? ''
            } else if (item.title === '技术支持') {
                item.value = device?.support ?? ''
            } else if (item.title === '联系方式') {
                item.value = device?.supportTell ?? ''
            } else if (item.title === '安装位置') {
                item.value = device?.area ?? ''
            }
        })
        editInfo.value = false
    })
}


onMounted(async () => {
    deviceInstance.value = await db.device.get(1) as device
    if (!deviceInstance.value) return;
    InfoItems.forEach(item => {
        if (item.title === '序列号') {
            item.value = deviceInstance.value!.serial
        } else if (item.title === '设备名称') {
            item.value = deviceInstance.value!.devicename
        } else if (item.title === '设备编号') {
            item.value = deviceInstance.value!.board
        } else if (item.title === '技术支持') {
            item.value = deviceInstance.value!.support
        } else if (item.title === '联系方式') {
            item.value = deviceInstance.value!.supportTell
        } else if (item.title === '安装位置') {
            item.value = deviceInstance.value!.area
        }
    })
})

window.onDownloadProgress = (progress) => {
    percent.value = progress
}
window.onDownloadComplete = () => {
    title.value = '正在解压'
    percent.value = 0
}
window.onExtractProgress = (progress) => {
    percent.value = progress
}
window.onExtractComplete = () => {
    downLoadFlag.value = false
}

</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;




    :deep(.ant-page-header-back) {
        font-size: .4rem;

    }

    :deep(.ant-page-header-heading-title) {
        font-size: .5rem;
        line-height: .6rem;
    }

    .info {
        width: 90%;
        text-align: center;
        margin: 0 auto;

        p {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            font-size: .4rem;
            text-align: left;
            margin-bottom: .125rem;

            &>span:first-child {
                width: 2.5rem;
            }
        }
    }

    :deep(.ant-list-item) {
        font-size: .375rem;
    }
}
</style>